<div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="left">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="if-not-md">Back</span>
        </a>
      </div>
      <div class="title">Panel / Side panels</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block block-strong">
      <p>Framework7 comes with 2 panels (on left and on right), both are optional. They have two different layouts/effects - <b>cover</b> above the content (like left panel here) and <b>reveal</b> (like right panel). You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view (like in right panel now) with its own dynamic navbar.</p>
    </div>
    <div class="block block-strong">
      <p class="row">
        <a href="#" class="col button button-raised button-fill panel-open">Open left panel</a>
        <a href="#" class="col button button-raised button-fill panel-open" data-panel="right">Open right panel</a>
      </p>
    </div>
  </div>
</div>
